import React, { Component } from 'react'
import { Form, Input,Row,Col,InputNumber } from 'antd';
import { FormInstance } from 'antd/lib/form';
import './FormCss.css'

// const { Option } = Select;
const { TextArea } = Input;
interface Props {
    
}
interface State {
     
}

  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 12 },
  };

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

export default class FormPage extends Component<Props, State> {
    formRef = React.createRef<FormInstance>();
    constructor(props:any){
        super(props)
        this.props = props
    }
    formref=React.createRef<FormInstance>();
    state = {}
    props={
        todos:{}
    }
       
    componentDidMount = ()=>{
        this.formRef.current!.setFieldsValue(this.props.todos);
    }
    render() {
        return (
            <div style={{padding:'24px'}}>
                <Form
                {...layout}
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                ref={this.formRef}
                >
                    <div>
                        <div className="antd-pro-pages-component-form-form-title-formTitle" style={{height:'20px'}}>
                            <span><b>基本信息</b></span>
                        </div>
                        <Row>
                            <Col span={12}>
                                <Form.Item 
                                    label="代码"
                                    name="code"
                                    rules={[{ required: true, message: '请输入代码'}]}
                                >
                                    <Input placeholder="请输入代码"/>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="名称"
                                    name="name"
                                    rules={[{ required: true, message: '请输入名称'}]}
                                >
                                    <Input placeholder='请输入名称'/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <Form.Item
                                    label="长度(cm)"
                                    name="length"
                                    rules={[{ required: false, message: '请输入简称'}]}
                                >
                                    <Input placeholder='请输入长度(cm)'/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <div className="antd-pro-pages-component-form-form-title-formTitle" style={{height:'20px'}}>
                            <span>规格</span>
                        </div>
                        <Row>
                            <Col span={12}>
                                <Form.Item
                                    label="承重"
                                    name="bearing"
                                    rules={[{ required: true, message: '请输入联系人'}]}
                                >
                                    <Input placeholder='请输入承重'/>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="容积率(%)"
                                    name="plotratio"
                                    rules={[{ required: true, message: '请输入联系方式'}]}
                                >
                                    <Input placeholder='请输入容积率(%)'/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                              <Col span={12}>
                                <Form.Item
                                    label="高度(cm)"
                                    name="height"
                                    rules={[{ required: true, message: '请输入联系方式'}]}
                                >
                                     <InputNumber  style={{width:'100%'}}/>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item 
                                    label="承重(kg)"
                                    name="zipCode"
                                    rules={[{ required: false, message: '请输入承重(kg)'}]}
                                >
                                     <InputNumber  style={{width:'100%'}}/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <Form.Item
                                    label="容积率(%)"
                                    name="unLoader"
                                    rules={[{ required: true, message: '请选择卸货方'}]}
                                >
                                      <Input placeholder='请输入容积率(%)'/>
                                </Form.Item>
                            </Col>
                        </Row>
                    
                        <div className="antd-pro-pages-component-form-form-title-formTitle" style={{height:'20px'}}>
                            <span>备注</span>
                        </div>
                        <div style={{width:'100%',marginLeft:'30px'}}>
                            <Row>
                                <Col span={24} >
                                    <Form.Item
                                        wrapperCol={{span:24}}
                                        name="note"
                                        rules={[{ required: false, message: '请输入备注'}]}
                                        >
                                        <TextArea autoSize={{ minRows: 4, maxRows: 12 }} style={{width:'100%'}} placeholder='请输入备注'></TextArea>
                                    </Form.Item>
                                </Col>
                            </Row>
                        </div>
                        
                        
                    </div>
                </Form>
            </div>
        )
    }
}
